<template>
  <div>
    <div class="header">
      <span style="width: 60px; text-align: right">关键字</span>
      <el-input
        placeholder="请输入关键字"
        v-model="empReq.keyword"
        style="width: 200px; margin-left: 10px"
      ></el-input>
      <el-button
        type="primary"
        style="margin-left: 34px"
        size="small"
        @click="getEmployees()"
      >
        关键字搜索
      </el-button>
      <a
        style="margin-left: 20px"
        href="https://www.gsxt.gov.cn/index.html"
        target="_blank"
      >
        国家企信网（查询企业信息）
      </a>
    </div>
    <div class="main">
      <el-table
        style="overflow: auto"
        :data="empRes.Items"
        stripe
        border
        highlight-current-row
      >
        <el-table-column label="公司">
          <template slot-scope="scope">
            {{ scope.row.CMP_Name }}
            <span v-if="scope.row.CMP_Status != 1" style="color: red">
              [{{ scope.row.CMP_StatusDesc }}]
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="USR_Name" label="员工" width="140">
          <template slot-scope="scope">
            {{ scope.row.USR_Name }}
            <span v-if="scope.row.EMP_Status != 1" style="color: red">
              [{{ scope.row.EMP_StatusDesc }}]
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="USR_Phone"
          label="手机号码"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="USR_Phone1"
          label="联系方式"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="USR_Address"
          label="地址"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="USR_Email"
          label="邮箱"
          width="200"
        ></el-table-column>
        <el-table-column label="操作" width="240" align="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="
                chooseEmployee = scope.row
                editEmployeeVis = true
              "
            >
              修改/完善
            </el-button>
            <el-button type="text" @click="showEmployeeCombine(scope.row)">
              合并
            </el-button>
            <el-button
              type="text"
              v-if="scope.row.EMP_Status == 0"
              @click="unfreezeEmployee(scope.row.ECV_TargetID)"
            >
              启用
            </el-button>
            <el-button
              type="text"
              v-if="scope.row.EMP_Status == 1"
              @click="freezeEmployee(scope.row.ECV_TargetID)"
            >
              注销
            </el-button>
            <el-button
              type="text"
              @click="deleteEmployee(scope.row.ECV_TargetID)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="width: 100%; height: 40px">
        <el-pagination
          layout="total,prev,pager,next"
          style="float: right"
          background
          small
          :current-page.sync="empReq.pageIndex"
          :total="empRes.Total"
          :page-size="empReq.pageSize"
          :page-sizes="[8, 12, 16]"
          @size-change="
            (val) => {
              empReq.pageSize = val
              getEmployees()
            }
          "
          @current-change="getEmployees()"
        ></el-pagination>
      </div>
    </div>

    <el-drawer title="编辑用户" :visible.sync="editEmployeeVis" direction="rtl">
      <el-form
        label-width="100px"
        style="margin-top: 20px; width: 80%"
        :model="chooseEmployee"
        v-if="chooseEmployee"
        ref="chooseEmployee"
      >
        <el-form-item
          label="姓名"
          prop="USR_Name"
          :rules="[{ required: true, message: '请填写姓名' }]"
        >
          <el-input v-model="chooseEmployee.USR_Name"></el-input>
        </el-form-item>
        <el-form-item
          label="手机号码"
          prop="USR_Phone"
          :rules="[{ required: true, message: '请填写手机号码' }]"
        >
          <el-input v-model="chooseEmployee.USR_Phone"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="chooseEmployee.USR_Phone1"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select
            filterable
            v-model="chooseEmployee.USR_Sex"
            style="width: 100%"
          >
            <el-option
              v-for="item in sexes"
              :key="item.val"
              :label="item.label"
              :value="item.val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系地址">
          <el-input v-model="chooseEmployee.USR_Address"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="chooseEmployee.USR_IDCard"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="chooseEmployee.USR_Email"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="chooseEmployee.EMP_Remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="editEmployee"
            size="medium"
            type="primary"
            icon="el-icon-circle-check"
            title="保存"
          >
            保存
          </el-button>
          <el-button
            @click="chooseEmployeeVis = false"
            size="medium"
            title="取消"
          >
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-dialog :visible.sync="empCombineVis" title="员工信息合并" width="500px">
      <el-form label-width="80px" v-if="chooseEmployee">
        <el-form-item label="原员工" type="textarea" :rows="3">
          <el-input v-model="chooseEmployee.USR_Name" disabled></el-input>
        </el-form-item>
        <el-form-item label="合并至">
          <el-select
            style="width: 350px"
            filterable
            remote
            reserve-keyword
            v-model="empCombineReq.targetId"
          >
            <el-option
              v-for="item in combineEmps"
              :key="item.ECV_TargetID"
              :label="item.USR_Name"
              :value="item.ECV_TargetID"
            >
              【{{ item.USR_Name }}】{{ item.USR_Phone | encodePhone }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" type="textarea" :rows="3">
          <el-input
            v-model="empCombineReq.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="combineEmployee"
            type="text"
            icon="el-icon-connection"
            title="合并"
          >
            合并
          </el-button>
          <el-button @click="empCombineVis = false" type="text" title="取消">
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  getEmployees,
  getCombineEmployees,
  editEmployee,
  combineEmployee,
  deleteEmployee,
  freezeEmployee,
  unfreezeEmployee,
} from '@/api/flowCenter/platform/employeeManage'

export default {
  data: function () {
    return {
      sexes: [
        { val: 1, label: '男' },
        { val: 0, label: '女' },
      ],
      empReq: {
        pageIndex: 1,
        pageSize: 10,
        keyword: null,
      },
      empRes: {
        Items: [],
        Total: 0,
      },
      combineEmps: [],

      chooseEmployee: null,
      empCombineReq: {
        sourceId: null,
        targetId: null,
        remark: null,
      },
      empCombineVis: false,
      editEmployeeVis: false,
    }
  },
  methods: {
    showEmployeeCombine(emp) {
      this.chooseEmployee = emp
      getCombineEmployees({
        cmpId: this.chooseEmployee.CCV_TargetID,
        empId: this.chooseEmployee.ECV_TargetID,
      }).then(({ data }) => {
        this.combineEmps = data
        this.empCombineVis = true
      })
    },
    getEmployees() {
      getEmployees(this.empReq).then(({ data }) => {
        this.empRes = data
      })
    },
    editEmployee() {
      if (!this.chooseEmployee) {
        return
      }
      this.$confirm(`是否保存？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(() => {
          editEmployee(this.chooseEmployee).then(() => {
            this.getEmployees()
            this.editEmployeeVis = false
          })
        })
        .catch(() => {
          return
        })
    },
    combineEmployee() {
      if (!this.chooseEmployee) {
        return
      }
      this.empCombineReq.sourceId = this.chooseEmployee.ECV_TargetID
      this.$confirm(
        `是否将${this.chooseEmployee.USR_Name}信息合并到该员工中？信息合并后，原员工相关的各种信息（如案件、日志、票据等）都会合并到新员工中，请谨慎操作`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info',
        }
      )
        .then(() => {
          combineEmployee(this.empCombineReq).then(({ data }) => {
            this.getEmployees()
            this.empCombineVis = false
          })
        })
        .catch(() => {
          return
        })
    },
    freezeEmployee(id) {
      this.$confirm(`是否注销用户？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        freezeEmployee(id).then(() => {
          this.getEmployees()
        })
      })
    },
    unfreezeEmployee(id) {
      this.$confirm(`是否解冻用户？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        unfreezeEmployee(id).then(() => {
          this.getEmployees()
        })
      })
    },
    deleteEmployee(id) {
      this.$confirm(`是否删除用户？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteEmployee(id).then((r) => {
          this.getEmployees()
        })
      })
    },
  },
  created: function () {
    var data = this.$store.getters['pagination/getRoutePage'](this.$route)
    Object.assign(this.$data, data)
    this.getEmployees()
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('pagination/setRoutePage', {
      route: this.$route,
      pageData: this.$data,
    })
    next()
  },
}
</script>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
.main {
  height: calc(100% - 130px);
}
</style>
